<template>
  <div>
    <transition name="slide-down">
      <div class="list" v-show="ifTitleAndMenuShow" @click="jumpToLogin">
        <a class="item with-avatar multi-lines" @click="jumpToLogin" v-if="name">
          <div class="avatar circle">
            <img :src="imgbase64" alt="">
          </div>
          <div class="content" @click.stop="jumpToHome">
            <div class="title">{{ name }}</div>
            <div class="subtitle">{{ loginflag }}</div>
          </div>
        </a>
        <a class="item with-avatar" @click.stop="jumpToHome">
          <div class="avatar text-gray"><i class="icon-user"></i></div>
          <div class="title">个人中心</div>
        </a>
        <a class="item with-avatar" @click="jumpToLabel">
          <div class="avatar text-gray"><i class="icon-list-ul"></i></div>
          <div class="title">浏览记录</div>
        </a>
        <a class="item with-avatar" @click="jumpToCollection">
          <div class="avatar text-gray"><i class="icon-pushpin"></i></div>
          <div class="title">收藏书单</div>
          <!-- <i class="icon icon-chevron-right muted"></i> -->
        </a>
        <a class="item with-avatar" @click="jumpToMessage">
          <div class="avatar text-gray"><i class="icon icon-comments"></i></div>
          <div class="title">我的消息</div>
        </a>
        <a class="item with-avatar" @click="jumpToModPwd">
          <div class="avatar text-gray"><i class="icon icon-lock"></i></div>
          <div class="title">安全中心</div>
        </a>
        <a class="item with-avatar" @click="jumpToConfig">
          <div class="avatar text-gray"><i class="icon-cog"></i></div>
          <div class="title">个人设置</div>
          <i class="icon icon-chevron-right muted"></i>
        </a>
        <!-- <a class="item with-avatar">
          <div class="avatar text-gray"><i class="icon-qrcode"></i></div>
          <div class="title">我的二维码</div>
        </a> -->
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: !this.$route.path === '/user',
      imgbase64: this.$store.state.imgbase64,
      name: this.$store.state.name,
      loginflag: this.$store.state.loginflag
    }
  },
  props: {
    ifTitleAndMenuShow: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    jumpToHome() {
      if (this.loginflag !== '在线') {
        this.$router.push({ path: '/login' })
      } else {
        this.$router.push({ path: '/user' })
      }
    },
    jumpToLogin() {
      if (this.loginflag !== '在线') {
        this.$router.push({ path: '/login' })
      }
    },
    jumpToCollection() {
      this.$router.push({ path: '/label', query: { tab: '收藏书单' } })
    },
    jumpToLabel() {
      this.$router.push({ path: '/label', query: { tab: '浏览历史' } })
    },
    jumpToMessage() {
      this.$router.push({ path: '/message', query: { tab: '我的消息' } })
    },
    jumpToModPwd() {
      this.$router.push({ path: '/modpwd' })
    },
    jumpToConfig() {
      this.$router.push({ path: '/config', query: { tab: '个人设置' } })
    }
  }
}
</script>
<style scoped>
.list {
  min-width: 10rem
}
</style>
